<template>
  <div class="container">
    <div class="app-container">
      <el-card>
        <el-button type="primary" style="margin-bottom: 20px;" @click="onAdd">添加权限</el-button>
        <el-table
          :data="tableData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column
            prop="name"
            label="名称"
            sortable
            width="250"
          />
          <el-table-column
            prop="code"
            label="标识"
            sortable
            width="250"
          />
          <el-table-column
            prop="description"
            label="描述"
          />
          <el-table-column
            label="操作"
          >
            <template #default="{row}">
              <el-button v-if="row.type===1" type="text">添加</el-button>
              <el-button type="text">编辑</el-button>
              <el-button type="text">删除</el-button>
            </template>

          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- 弹出层 -->
    <add-prrmi :visible.sync="visible" />
  </div>
</template>
<script>
import { getListPermAPI } from '@/api/permission'
import { list2Tree } from '@/utils'
import addPrrmi from './components/add-prrmi.vue'
export default {
  name: 'Permission',
  components: { addPrrmi },
  data() {
    return {
      tableData: [],
      visible: false
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    // 新增
    onAdd() {
      this.visible = true
    },
    async onLoad() {
      const res = await getListPermAPI()
      console.log(res)
      this.tableData = res.data
      // 转树
      this.tableData = list2Tree(res.data, 0)
    }
  }
}
</script>
